@use '_values/colors';
@use 'sass:color';
@use '_utils';

.container {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	background-color: color.adjust(colors.$sui-blue, $alpha: -0.9);
	border-radius: 15px;
	padding: 10px 14px;
	text-decoration: none;
	color: colors.$cta-blue;
	flex-basis: 98px;

	i {
		font-size: 18px;
		font-weight: 400;
	}

	&:nth-child(2) {
		i {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: center;

			@include utils.angled-arrow;

			font-size: 18px;
			font-weight: 400;
			margin: auto;
			color: colors.$cta-blue;
		}
	}

	&:hover {
		color: colors.$cta-blue-hover;
	}

	&.disabled {
		pointer-events: none;
		background-color: colors.$gray-40;
		color: colors.$gray-60;

		i {
			color: colors.$gray-60;
		}
	}
}

.icon-container {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	color: colors.$cta-blue;
	padding: 5px;
	font-size: 16px;
}

.text {
	text-align: center;
	font-weight: 600;
	font-size: 13px;
}
